<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .fish{
      position: relative;
      width: fit-content;
      height: fit-content;
      margin: 200px;
    }
    .fish-body{
      position: relative;
      z-index: 2;
      width: 224px;
      height: 95px;
      background: orange;
      border-radius: 60% 120% 120% 60% / 90% 100% 100% 90%;
      border-radius: 50%;
      border: 1px solid black;
      display: flex;
      align-items: center;
    }
    .logo{
      width: 40px;
      height: 40px;
      min-width: 40px;
      border-radius: 50%;
      object-fit: cover;
      overflow: hidden;
      margin-right: 10px;
    }
    .fish-tail{
      position: absolute;
      right: -40px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
      background: #bc9267;
    width: 50px;
    height: 70px;
    border-radius: 80% 20% 20% 80% / 50%;
    border: 3px solid #2a1f17;
    transform-origin: center left;
    --transform-1: translate(190px,80px);
    --custom-animation: tailAnim;
    }
    @keyframes tailSlow {
      0% {
        transform: rotateY(25deg) skewX(7deg);
      }
      100% {
          transform: rotateY(-25deg) skewX(7deg);
      }
    }
    .fish-fins-box{
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
    }
    .fish-fins-top{
      position: absolute;
      top: 0;
      left: 40%;
      width: 25%;
      height: 35%;
      border-radius: 100% 0 0 0;
      background: orange;
      border: 3px solid #2a1f17;
      transform: translate(-40%,-80%) skew(-10deg) rotate(4deg);
    }
    .fish-fins-bot{
      position: absolute;
      bottom: 0;
      right: 0;
      width: 25%;
      height: 35%;
      border-radius: 0 0 0 100%;
      background: orange;
      border: 3px solid #2a1f17;
      transform: translate(-90%,40%) skew(10deg) rotate(-16deg);
    }
  </style>
</head>
<body>
  <div class="fish">
    <div class="fish-body">
      <img src="http://www.cxy521.com/static/img/index/relax/mp.png" alt="" class="logo">
      <div class="game-info">
        <div class="game-title">扭曲世界</div>
        <div class="game-desc">你周围的世界会改变形状，显得扭曲和变形。</div>
      </div>
    </div>
    
    
    <div class="fish-tail"></div>
    <div class="fish-fins-box">
      <div class="fish-fins fish-fins-top"></div>
      <div class="fish-fins fish-fins-bot"></div>
    </div>
  </div>
</body>
</html>